<template>
  <div>
    <h1>当前总和为: {{sum}}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="odd">当前求和为奇数再加</button>
    <button @click="slow">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data(){
    return{
      n:1,
      sum:0
    }
  },
  methods:{
    add(){
     this.sum = this.sum + this.n
    },
    sub(){
      this.sum = this.sum - this.n
    },
    odd(){
      let sum = this.sum + this.n
      if(sum%2===0){
        console.log('结果为偶数赋值但不显示!')
      }else {
        this.sum = sum
      }
    },
    slow(){
      setTimeout(function () {
        this.sum = this.sum + this.n
      }, 500)
    }
  }

}
</script>

<style scoped>

</style>